<template>
  <div id="model">
    <div class="dashboard_title">设备型号</div>
    <div id="chart-model" ref="type"></div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getDeviceModel } from '@/api/home';

const type = ref();
let chart: any;
const data = ref([]);
const colors = ref([]);
onMounted(() => {
  getData();
});
onUnmounted(() => {
  if (!chart) {
    return;
  }
  chart.clear();
  chart.dispose();
  chart = null;
  data.value = [];
  colors.value = [];
});
const getData = async () => {
  const res = await getDeviceModel();
  if (res.code == 200) {
    const list = res.data as any[];
    list.forEach((item, index) => {
      data.value.push({
        name: item.model,
        value: item.modelCount,
      });
      colors.value.unshift(
        'rgb(131, 150, 148,' + (index + 1) / res.data.length,
      ) + ')';
    });
    if (data.value.length > 0) {
      nextTick(() => {
        init(data.value);
      });
    }
  }
};
const init = (data: any) => {
  // let colors = []
  // data.forEach(item=>{
  //     colors.push(rgba(131, 150, 148))
  // })
  if (!type.value) return;
  chart = echarts.init(type.value);
  let option = {
    tooltip: {
      trigger: 'item',
      confine: true,
      formatter: (params: any) => {
        // console.log(params);
        return `<div>${params.marker}${params.data.name}:<span style="display: inline-block;width: 40px;text-align: center;">${params.data.value}</span> <span>(${params.percent}%)</span></div>`;
      },
    },
    // legend: {
    //   type: "scroll",
    //   itemWidth: 10,
    //   itemHeight: 10,
    //   orient: "vertical",
    //   icon: "circle",
    //   top: "5%",
    //   right: "10%",
    //   itemGap: 10,
    //   formatter: (name) => {
    //     let value = data.filter((item) => item.name == name)[0];
    //     return `{title|${name}}{value|${value.value}}`;
    //   },
    //   // data,
    //   textStyle: {
    //     padding: [2, 0, 0, 0],
    //     color: "rgba(255, 255, 255, 0.6)",
    //     rich: {
    //       title: {
    //         padding: [0, 10, 0, 10],
    //         width: 120,
    //         fontSize: 14,
    //       },
    //       value: {
    //         width: 40,
    //         fontSize: 14,
    //         color: "#fff",
    //         // align: 'center',
    //       },
    //       percent: {
    //         width: 65,
    //         fontSize: 14,
    //         // align: 'left',
    //       },
    //     },
    //   },
    // },
    series: [
      {
        name: '',
        type: 'pie',
        center: ['50%', '40%'],
        radius: ['0%', '75%'],
        avoidLabelOverlap: true,
        // itemStyle: { borderColor: '#fff', borderWidth: 2 },
        color: ['#95A4A3', '#839694', '#698280'],
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 20,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          formatter: (params: any) => {
            const name = params.name;
            return `{t|${params.percent}%}\n{t|${name + '  ' + params.value}}`;
          },
          rich: {
            t: {
              color: '#eefaff',
              lineHeight: 20,
              fontSize: 12,
              align: 'left',
            },
          },
        },
        data,
      },
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart && chart.resize();
  });
};
</script>

<style lang="scss" scoped>
#model {
  width: 100%;
  height: 100%;

  #chart-model {
    height: calc(100% - 6vh);
  }
}
</style>
